<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏高度自适应</title>
    <style>
        body {
            font-family: "Lato", sans-serif;
        }

        .sidenav {
            width: 130px;
            position: fixed;
            z-index: 1;
            top: 20px;
            left: 10px;
            background-color: #eee;
            overflow: hidden;
            padding: 8px 0;
        }

        .sidenav a {
            padding: 6px 8px 6px 16px;
            text-decoration: none;
            font-size: 25px;
            color: #2196F3;
            display: block;
            text-align: left;
        }

        .sidenav a:hover {
            background-color: #064579;
        }

        .main {
            margin-left: 140px;
            font-size: 28px;
            padding: 0 10px;
        }

        @media screen and(max-height: 450px) {
            .sidenav {
                padding-top: 15px;
            }

            .sidenav a {
                font-size: 18px;
            }
        }
    </style>
</head>

<body>
    <div class="sidenav">
        <a href="#about">关于我们</a>
        <a href="#services">服务项目</a>
        <a href="#clients">客户信息</a>
        <a href="#contact">联系方式</a>
    </div>

    <div class="main">
        <h2>侧栏</h2>
        <p>侧边栏高度与其内容（链接）一样，并始终显示。</p>
        <p>向下滚动页面查看结果。</p>
        <p>文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。
        </p>
        <p>文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。
        </p>
        <p>文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。
        </p>
        <p>文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。文本内容。。。
        </p>
    </div>
</body>

</html>